import { View, Image } from "@tarojs/components"
import { useState, ReactElement, useRef, useEffect } from "react"
import { TaroVirtualList } from 'taro-virtual-list'
import { AtList, AtListItem } from 'taro-ui'
import cardImg from '@/assets/image/card-img.png'
import Taro from '@tarojs/taro'
import FloatBtn from '../../../components/float-btn'
import { categoryList, sortList } from '../clothes-data'
import './index.less'
import { goodsType } from "../types"


const selections = [
    {
        text: '分类',
        val: 'category'
    },
    {
        text: '排序',
        val: 'sort'
    }
]

const goodsData: Array<goodsType> = [
    {
        img: cardImg,
        price: 25,
        name: '优衣库UT联名短袖'
    },
    {
        img: cardImg,
        price: 125,
        name: '优衣库UT联名短袖'
    },
    {
        img: cardImg,
        price: 35,
        name: '优衣库UT联名短袖'
    },
    {
        img: cardImg,
        price: 65,
        name: '优衣库UT联名短袖'
    },
    {
        img: cardImg,
        price: 69,
        name: '优衣库UT联名短袖'
    },
]

function ClothesSquare() {
    const [current, setCurrent] = useState<string>(selections[0].val)
    const [visible, setVisible] = useState(false)
    const [imgHeight, setImgHeight] = useState(0)
    const [goods, setGoods] = useState<Array<Array<goodsType | []>>>()

    const ref = useRef()

    useEffect(() => {
        if (ref.current) {
            const query = Taro.createSelectorQuery()
            query.select('.img').boundingClientRect()
            query.selectViewport().scrollOffset()
            query.exec((res) => {
                setImgHeight(res[1].scrollWidth / 2 - 30 - 5)
            })
        }
        const arr: Array<Array<goodsType | []>> = []
        const len = goodsData.length
        for (let i = 0; i < len; i += 2) {
            arr.push([
                goodsData[i],
                goodsData[i + 1] ?? null
            ])
        }
        console.log(arr);
        setGoods(arr)
    }, [ref])

    function listContent(): ReactElement {
        const listData = {
            category: categoryList,
            sort: sortList
        }
        return <>
            <View className='list-bg' onClick={() => setVisible(false)}></View>
            <AtList className='list'>
                {
                    listData[current].map(({ text }, k) => {
                        return <AtListItem title={text} key={k} />
                    })
                }
            </AtList>
        </>
    }

    function handleClick(val: string) {
        if (visible)
            val === current ? setVisible(!visible) : setCurrent(val)
        else {
            setCurrent(val)
            setVisible(!visible)
        }
    }

    function setMargin(k: number) {
        return k % 2 == 0 ? { margin: '2.5px 2.5px 2.5px 0px' } : { margin: '2.5px 0px 2.5px 2.5px' }
    }

    const handleBottom = () => {
        console.log('触底了')
    }
    const handleComplete = () => {
        console.log('加载完成')
    }

    // 渲染单个商品卡片
    const goodsCard = (arr: Array<goodsType>) => {
        return <View className='at-row at-row--wrap at-row__justify--between'>
            {
                arr.map((v, k) => {
                    return <>
                        {
                            v &&
                            <View className='at-col at-col--wrap at-col-6 card-wrap' key={k}>
                                <View className='card' style={setMargin(k)}>
                                    <Image src={v.img as unknown as string} className='img' style={{ height: imgHeight }} />
                                    <View className='name'>{v.name}</View>
                                    <View className='price'>￥{v.price}</View>
                                </View>
                            </View>
                        }
                    </>
                })
            }
        </View>
    }

    return (
        <View className='clothes-square' ref={ref}>
            <View className='at-row '>
                {
                    selections.map(({ text, val }, k) => {
                        return <View className='at-col at-col-6' key={k} onClick={() => handleClick(val)}>
                            <View className='text'>{text}</View>
                        </View>
                    })
                }
            </View>
            {visible && listContent()}
            <TaroVirtualList
                list={goods}
                onRender={goodsCard}
                onBottom={handleBottom}
                onComplete={handleComplete}
                scrollViewProps={{
                    style: {
                        "height": 'calc(100vh - 48px - 60px - 36px- 15px)',
                    },
                }}
            />
            <FloatBtn icon='shopping-cart' />
        </View >
    )
}

export default ClothesSquare